<template>
  <div class="app-container">
    <el-form ref="formSearch" :model="params" label-width="100px">
      <el-row class="form_table">
        <el-col :span="6">
          <el-form-item prop="title" label="标题">
            <el-input v-model.trim="params.title" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="title" label="发布人">
            <el-input v-model.trim="params.publisher" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-button type="primary" @click="search('formSearch')">{{ $t('btn.query') }}</el-button>
          <el-button type="danger" @click="reset('formSearch')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-button :disabled="allReadClick" type="primary" @click="allRead()">全部标记已读</el-button>
    <!-- 查询结果列表 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" style="width: 100%" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" :selectable="checkboxSelect" width="50" center />
      <el-table-column align="center" label="序号" width="70">
        <template slot-scope="scope">
          {{ params.pageSize * (params.pageNumber - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column label="消息类型" width="120">
        <template slot-scope="scope">
          {{ scope.row.msgCategory | filtersMsgCategory }}
        </template>
      </el-table-column>
      <el-table-column prop="publisher" label="发布人" width="120" />
      <el-table-column label="发布时间" width="120">
        <template slot-scope="scope">
          {{ scope.row.sendTime }}
        </template>
      </el-table-column>
      <el-table-column label="优先级">
        <template slot-scope="scope">
          {{ scope.row.priority | filtersPriority }}
        </template>
      </el-table-column>
      <el-table-column label="阅读状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.readFlag | filtersReadFlag }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="50" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="allExamine(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination background :total="totalCount" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-if="dialogFormVisible" title="消息详情" center width="60%" :visible.sync="dialogFormVisible">
      <add-edit ref="dlg" :help-form="formData" :click-type="clickType" :classification-list="classificationList" />
    </el-dialog>
  </div>
</template>

<script>
import { myAnnotInfo, tagAllRead, readDetail } from '@/api/my-massage'
import AddEdit from './component/index'
var typeData
export default {
  name: 'Support',
  components: {
    AddEdit,
  },
  filters: {
    filtersMsgCategory(val) {
      for (var i = 0; i < typeData.msgCategoryOption.length; i++) {
        if (typeData.msgCategoryOption[i].value == val) {
          return typeData.msgCategoryOption[i].label
        }
      }
    },
    filtersPriority(val) {
      for (var i = 0; i < typeData.priorityOption.length; i++) {
        if (typeData.priorityOption[i].value == val) {
          return typeData.priorityOption[i].label
        }
      }
    },
    filtersReadFlag(val) {
      for (var i = 0; i < typeData.readFlagOption.length; i++) {
        if (typeData.readFlagOption[i].value == val) {
          return typeData.readFlagOption[i].label
        }
      }
    },
  },
  data() {
    return {
      // 优先级
      priorityOption: [
        {
          label: '高',
          value: 'H',
        },
        {
          label: '中',
          value: 'M',
        },
        {
          label: '低',
          value: 'L',
        },
      ],
      // 消息类型
      msgCategoryOption: [
        {
          label: '通知公告',
          value: 1,
        },
        {
          label: '系统消息',
          value: 2,
        },
      ],
      // 发布状态
      readFlagOption: [
        {
          label: '未读',
          value: 0,
        },
        {
          label: '已读',
          value: 1,
        },
      ],

      selectedList: [],
      clickType: '',
      formData: {},
      // 弹框默认隐藏
      dialogFormVisible: false,
      params: {
        pageNumber: 1,
        pageSize: 10,
        title: '',
        publisher: '',
        order: 'DESC',
        sort: 'update_time',
      },
      // 所属分类数据
      classificationList: [],
      list: [],
      totalCount: 0,
      totalPage: 0,
      listLoading: false,
      allReadClick: true,
      allpublishIds: [],
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.formData = {}
        this.$refs.dlg.$refs.helpForm.resetFields()
      }
    },
  },
  // 在生命周期 beforeCreate里面改变this指向
  beforeCreate: function() {
    typeData = this
  },
  mounted() {
    this.queryByPage()
  },
  created() {},
  methods: {
    // 查询
    search(formName) {
      this.params.pageNumber = 1
      this.queryByPage()
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields()
      this.params.pageNumber = 1
      this.params.title = ''
      this.params.publisher = ''
      this.queryByPage()
    },
    async queryByPage() {
      this.listLoading = true
      const res = await myAnnotInfo(this.params)
      if (res.code != '200') return
      this.list = res.data.records
      this.totalCount = res.data.total
      this.totalPage = res.data.pages
      this.listLoading = false
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.queryByPage()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.queryByPage()
    },
    checkboxSelect(row, rowIndex) {
      if (row.readFlag != 0) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },
    colseDialog(type) {
      this.dialogFormVisible = false
      if (type != 'no') {
        this.queryByPage()
      }
    },
    async allExamine(data) {
      this.dialogFormVisible = true
      this.formData = data.id
    },
    // 全部标记已读
    handleSelectionChange(val) {
      this.selectedList = val
      if (this.selectedList.length > 0) {
        this.allReadClick = false
      } else {
        this.allReadClick = true
      }
    },
    // 全部已读ids提交
    async allRead() {
      this.allpublishIds = []
      if (this.selectedList.length > 0) {
        this.selectedList.forEach((item) => {
          this.allpublishIds.push(item.id)
        })
      }
      const res = await tagAllRead(this.allpublishIds)
      if (res.code != '200') return
      this.queryByPage()
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  display: inline-block;
  text-align: left;
}
</style>
